<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>主页</title>
	<!--移动端适配-->
	<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0" />
	<!--样式-->
	<link rel="stylesheet" href="css/index.css">
	<!--图标-->
	<link rel="icon" type="image/x-icon" href="img/logo.ico"/>
	<script type="text/javascript" src='js/zepto.min.js'></script>
	<script type="text/javascript" src='js/zepto.fx.js'></script>
	<script type="text/javascript" src='js/zTouch.min.js'></script>
	<script src="js/swiper.min.js"></script>
	<link rel="stylesheet" type="text/css" href="css/swiper.min.css" />
	<script src=""></script>
</head>
<body>
		<div class="suctionTop">
			<div><img src="img/classifyImage.png" alt="" /></div>
			<div>
				<div>
					<input type="text" placeholder="天猫超市   一站式" id="jump_search"/>
				</div>
				<div>
					<a href="html/shopping.html"><img src="img/shoppingcartImega.png" alt="" /></a> | <span>北京</span>
				</div>
			</div>
		</div>
		<!--轮播-->
		<div class="banner">
			<div class="swiper-container">
				<div class="swiper-wrapper">
					<div class="swiper-slide"><img src="img/a1.png" class="img1" /></div>
					<div class="swiper-slide"><img src="img/a2.png" class="img1" /></div>
					<div class="swiper-slide"><img src="img/a3.png" class="img1" /></div>
					<div class="swiper-slide"><img src="img/a4.png" class="img1" /></div>
					<div class="swiper-slide"><img src="img/a5.png" class="img1" /></div>
					<div class="swiper-slide"><img src="img/a6.png" class="img1" /></div>
				</div>
				<div class="swiper-pagination"></div>
			</div>
		</div>

        <!--导航-->
		<div class="jb_list">
			<ul>
				<li index="0"><img src="img/1.png"><p>母婴玩具</p></li>
				<li index="1"><img src="img/2.png"><p>休闲零食</p></li>
				<li index="2"><img src="img/3.png"><p>酒水乳品</p></li>
				<li index="3"><img src="img/4.png"><p>粮油副食</p></li>
				<li index="4"><img src="img/5.png"><p>洗护美妆</p></li>
			</ul>
			<ul>
				<li index="5"><img src="img/6.png"><p>家居用品</p></li>
				<li index="6"><img src="img/7.png"><p>纸品家清</p></li>
				<li index="7"><img src="img/8.png"><p>家用电器</p></li>
				<li index="8"><img src="img/9.png"><p>进口食品</p></li>
				<li index="9"><img src="img/10.png"><p>出游季</p></li>
			</ul>
		</div>



		<!--限时抢购-->
		<div class="jb_hd">
			<div class="jb_left">
				<div class="jb_left_top">
					<p class="fengqiang">
						<img src="img/cont_03.png"><br />
						<span>12点场剩余时间</span>
					</p>
					<p class="remaining_time">
						<span class="time_h">
							<b>0</b>
							<b>1</b>
						</span>
						<strong>:</strong>
						<span class="time_m">
							<b>2</b>
							<b>3</b>
						</span>
						<strong>:</strong>
						<span class="time_s">
							<b>2</b>
							<b>5</b>
						</span>
					</p>
				</div>

				<div class="jb_left_bottom">
					<img src="img/zhijin.png">
					<div class="tag">
						一元起
					</div>
				</div>
				
			</div>
			<div class="jb_right">
				<div class="jb_right_top">
					<div class="jb_right_top_left">
						<h1>生鲜区</h1>
						<p>买二免一<br />
						   爆款直降</p>
					</div>
					<div class="jb_right_top_right">
						<img src="img/shengxian.png">
						<div class="tag">
							<p>￥37.6</p>
							<p>1份</p>
						</div>
					</div>
				</div>
				<div class="jb_right_bottom">
					<div>
						<span>好货</span>
						<p>超市热卖</p>
						<img src="img/cont_12.png" alt="">
					</div>
					<div>
						<span>量贩装</span>
						<p>仅2.2元/盒</p>
						<img src="img/cont_14.png" alt="">
					</div>
					<div>
						<span>9元馆</span>
						<p>抢优品</p>
						<img src="img/cont_16.png" alt="">
					</div>
				</div>
			</div>
		</div>


		<!--贵一赔十-->
		<div class="contentThree">
			<div>
				<img src="img/cont_22.png" alt="" />
				<p>
					<a href="javascript:;" style="color:#5f525e;font-size:0.55rem;">买贵赔十倍></a>
				</p>
			</div>
			<div>
				<img src="img/cont_23.png" alt="" />
			</div>
			<div>
				<img src="img/cont_25.png" alt="" />
			</div>
			<div>
				<img src="img/cont_26.png" alt="" />
			</div>
		</div>




		<!--底部-->
		<div class="jb_footer">
			<a href="javascript:;"><img src="img/JJ_03.png" alt=""><p>首页</p></a>
			<a href="javascript:;"><img src="img/JJ_05.png" alt=""><p>物流</p></a>
			<a href="html/shopping.html"><img src="img/JJ_07.png" alt=""><p>购物车</p></a>
			<a href="html/personal.html"><img src="img/JJ_09.png" alt=""><p>我的淘宝</p></a>
			<a href="javascript:;"><img src="img/JJ_11.png" alt=""><p>更多</p></a>
		</div>
</body>

</html>
<script src="js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<script>
	window.onload = function() {
		document.documentElement.style.fontSize = document.documentElement.clientWidth / 320 * 20 + 'px';
		window.onresize = function() {
			document.documentElement.style.fontSize = document.documentElement.clientWidth / 320 * 20 + 'px';
		};

		var swiper = new Swiper(".swiper-container",{
			autoplay: 1000,
			loop: true,
			speed: 2000,
			pagination: '.swiper-pagination',
			paginationClickable: true,
			autoplayDisableOnInteraction: false
		})
	};
</script>
<script type="text/javascript">

	var scrollTop=null;
	$(document).on('touchmove',function(e){
		scrollTop=$(document).scrollTop();
		if ( scrollTop!=0 ) {
			$('.suctionTop').addClass('bgcolor');
		}else{
			$('.suctionTop').removeClass('bgcolor');
		}
	});
	
	
	$('.jb_list li').click(function(){
	    //获取元素的index属性值
		var num=$(this).attr('index');
		//储存 选项的index值 储存在sessionStorage 中
		sessionStorage.setItem('num',num);
		//页面跳转到选项 页
		location.href="html/option.html";
	})
	
	//距离结束还有多长时间
	var newTime=new Date(2017,9,30,19,0,0);
	var timer=null;
	function fn_time () {
		var nowTime=new Date();
		var t=Math.floor((newTime-nowTime)/1000);
		var day=Math.floor(t/86400);
		var h=Math.floor(t%86400/3600);
		var m=Math.floor(t%86400%3600/60);
		var s=t%60;
		h=zero(h);
		m=zero(m);
		s=zero(s);
		if (t>=0) {
			$('.time_h b:first').text(h.charAt(0));
			$('.time_h b:last').text(h.charAt(1));
			$('.time_m b:first').text(m.charAt(0));
			$('.time_m b:last').text(m.charAt(1));
			$('.time_s b:first').text(s.charAt(0));
			$('.time_s b:last').text(s.charAt(1));
		} else{
			clearInterval(timer);
		}
	}
	fn_time();
	timer=setInterval(fn_time,1000);
	//时间前加0函数
	function zero (x) {
		return x<10?'0'+x:''+x;//三元运算符
	}
	
	//红色圆缩放
	setInterval(function(){
		$('.tag').attr('style','animation: none;');
		setTimeout(function(){
			$('.tag').attr('style','animation: dong 0.6s ease-in-out;');
		},1000)
	},3000);
	//点击搜索框跳到搜索页面
//	$('#jump_search').click(function(){
//		location.href="html/search.html";
//	})
</script>